/* 首页 */

/* 从设计角度看，门户类页面整体来看内容在水平方向上延展，主体的内容通常是固定大小 */

/* 
    顶层盒子的宽度尺寸为自适应 
    此处定义是标签选择器
*/
header,
nav,
main,
footer {
  /* CSS的声明  属性名: 值; 
        css中的值相对单位值是 % ，相对于父容器的控制
    */
  width: 100%;
}

/* 
    定义统一的容器宽度，当前页面设计宽度1200px 
    此处定义使用的是类选择器，使用类选择器在标签属性class中引用
    class属性中可以有多个类选择器，空格分隔
*/
/* 在正常文档流的标准做法中，使用margin: 0 auto; 完成盒子的居中布局 */
.w1200 {
  width: 120rem;
  margin: 0 auto;
  /* 上下外边距为0， 左右外边距为auto */
}

/* 在弹性布局中弹性项向右自适应 */
.push-right {
  margin-left: auto;
}

/* 垂直方向上的间距定义 */
.mt10 {
  margin-top: 1rem;
}

.mt20 {
  margin-top: 2rem;
}

.mt30 {
  margin-top: 3rem;
}

/* 1. 页面顶部 */
header {
  color: #a5a4a4; /* 前景色，也就是字体的颜色*/
  background-color: #282828; /* 背景相关的定义 */
  /* 
        backgroud 是一种简写背景样式的方式，把多个维度的背景属性一起定义
          例如：background: #282828 url(./foo.png) no-repeat left top;
        background-color -> 背景颜色
        background-image -> 背景图片
        background-repeat -> 背景图片重复
        background-position -> 背景图片位置，图片切片
    */
}

/* 页面布局工作：首先定义盒子的占位，然后再定义排版的方式 */

/* 1.1 顶部信息 */
.top-nav {
  font-size: 1.2rem;
  height: 3rem;
  /* inline垂直居中，block无效 */
  /* vertical-align: middle;   */
  /* 采用控制行高的方式来实现垂直居中，通常行高与高度相同 */
  /* line-height: 3rem; */
  /* 
        采用弹性盒子的方式来实现“垂直”居中，交叉轴方向
        主轴对齐的定义：justify-content
        交叉轴对齐的定义：align-items
     */
  display: flex;
  align-items: center;
}

/* 后代选择器  子代选择器 " > " */
.top-nav a {
  color: #a5a4a4;
}

/* 
  伪类选择器(:) : :hover  鼠标悬停
                 :first-child :first-of-type  元素中的第一个
                 :last-child  :last-of-type   元素中的最后一个
                 :nth-child   :nth-of-type      间隔选择元素
                 :nth-last-child  :nth-last-of-type  从后开始间隔选择元素
  伪元素选择器(::) "::after ::before"
*/
/* 当前3个a标签，不是最后一个a，其他的后面加上一个伪元素，显示“|” */
.top-nav a:not(:last-of-type)::after {
  content: "|";
  display: inline-block; /* 行级(inline)元素与块级(block)元素的中间状态*/
  padding: 0 1rem;
}

/* 1.2 页面logo */
/* 交集选择器：通常用来更明确的特指 */
div.logo {
  height: 10rem;
  background: #831a16 url(../images/head.jpg) no-repeat center center;
}

/* 定义包裹logo图片盒子的高度，让图片依据父容器大小自适应 */
h1 {
  height: 10rem;
}

/* 2. 页面导航定义 */
nav {
  background-color: #ebebeb;
}

/* 把行级元素a改成块级元素 */
nav a {
  display: block;
  text-align: center;
  height: 4rem;
  line-height: 4rem;
}

/* 2.1 一级菜单定义 */
nav ul {
  display: flex;
  align-items: center;
}

nav li > a {
  font-size: 1.6rem;
}

nav li:first-of-type > a {
  color: #fff;
  background-color: #89211b;
}

nav li:hover > a {
  color: #fff;
  background-color: #89211b;
}

/* 弹性元素上的属性flex
   flex： 增长系数  收缩系数  主轴默认大小
*/
nav li {
  flex: 1;
  /* 相对定位 */
  position: relative;
  /* 绝对定位 */
  /* position: absolute; */
}
/* 2.2 子菜单定义 */
/* 关于CSS中的定位：
    定位也是布局的其中的一种方法。
    其中相对定位、绝对定位是常见的两种，并且要一起定义。
    relative: 保留文档流中的占位，移动的值是参考原位置
    absolute: 脱离文档流中的占位，移动的值是参考已定位父容器，否则则参考html
*/
nav ul.sub-menu {
  display: none;
  position: absolute;
}

/* 显示二级菜单 */
nav li:hover ul.sub-menu {
  display: flex;
  /* 改变弹性布局主轴方向 */
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  background-color: #89211b;
}

nav ul.sub-menu a {
  color: #fff;
  font-size: 1.2rem;
}

nav ul.sub-menu a:hover {
  background-color: #a1261f;
}

/* 3.页面主体 */
.t {
  display: flex;
  align-items: center;
  background: transparent;
  line-height: 5rem;
  padding-bottom: 1rem;
  border-bottom: 0.1rem dashed #b2b2b2;
}

.t h2 {
  color: #89211b;
  font-size: 2rem;
  margin-left: 1rem;
}

/* 3.1 轮播图 */
.banner {
  display: flex;
  justify-content: center;
}

/* 3.1.1 中间的图片 */
.banner ul {
  /* 取消增长和收缩，固定初始尺寸为120rem */
  flex: 0 0 120rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.banner ul > li {
  flex: 0 0 120rem;
}
/* 向左移动一个图片 */
.banner ul > li:first-of-type {
  margin-left: -120rem;
}

.banner figure {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 33.5rem;
}

.banner figcaption {
  color: #fff;
  font-size: 1.6rem;
  height: 4rem;
  line-height: 4rem;
  margin-top: -4rem;
  margin-left: 2rem;
  padding-left: 4rem;
  background-color: rgba(0, 0, 0, 0.6);
}

/* 3.1.2 左右的箭头 */
/* 
   属性z-index，可以理解为垂直与屏幕的方向，
   当盒子区域重叠，该值大的在上层，
   默认所有盒子的z-index为0
   通常不要定义成1，2，3，4，保持一定的间隔
*/
.banner p {
  /* 增长和收缩，固定初始尺寸为剩余空间100% */
  flex: 1 1 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  position: relative;
}

/* 箭头的统一定义 */
.banner p a.arrow {
  display: block;
  width: 6rem;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 0;
}

.banner p a.prev {
  right: 0;
  background: url(../images/slider-arrow.png) no-repeat -18rem 0;
}

.banner p a.prev:hover {
  background: url(../images/slider-arrow.png) no-repeat -12rem 0;
}

.banner p a.next {
  left: 0;
  background: url(../images/slider-arrow.png) no-repeat -6rem 0;
}

.banner p a.next:hover {
  background: url(../images/slider-arrow.png) no-repeat 0 0;
}

/* 3.2 学院新闻 */
.news {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.news > section {
  display: flex;
  align-items: center;
  height: 28.5rem;
}

/* 通常应该使用.pic-news 和 .txt-news 来定义
   <article class="pic-news">
   这里特别的用伪类来选择 
*/

/* 3.2.1 图片新闻 */
.news > section article:nth-of-type(1) {
  flex: 0 0 63rem;
}

.news > section article:nth-of-type(1) ul {
  display: flex;
  height: 28.5rem;
}

.news > section article:nth-of-type(1) li {
    margin-right: 2.5rem;
    background-color: #f7f7f7;
    overflow: hidden;
}

.news > section article:nth-of-type(1) li figure{
    display: flex;
    flex-direction: column;
    max-height: 28.5rem;
}

/* .news > section article:nth-of-type(1) li figure > div{
    height: 18.5rem;
} */

.news > section article:nth-of-type(1) li img{
    border-bottom: .3rem #efab09 solid;
}

.news > section article:nth-of-type(1) li:first-of-type img{
    border-bottom: .3rem #ec7c51 solid;
}

.news > section article:nth-of-type(1) li a{
    display: inline-block; 
    height: 2.4rem;
    line-height: 2.4rem;
    padding: 0 1rem;
    font-weight: bold;
    font-size: 1.4rem;
}

.news > section article:nth-of-type(1) li p{
    height: 4rem;
    line-height: 2rem;
    color: #666;
    padding: .5rem 1rem 0 1rem;
}

.news > section article:nth-of-type(1) li span{
    color: #666;
    padding-left: 1rem;
}


/* 3.2.2 文字新闻 */
.news > section article:nth-of-type(2) {
  flex: 0 0 57rem;
}
